<template>
  <div style="padding:30px;">
    <el-tree
      :data="data"
      node-key="id"
      :default-expanded-keys="[2, 3]"
      :props="defaultProps"
    />
    <el-alert :closable="false" title="123" type="success">
      <el-alert :closable="false" title="456" type="warning"/>
    </el-alert>

    <el-form-item placeholder="部门名称">
      <el-cascader ref="cascadeMenu" v-model="selectedOptions" expand-trigger="hover" :options="options" :props="defaultParams" change-on-select :show-all-levels="false" clearable @change="handleMenu" />
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'Structure',
  data() {
    return {
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultParams: {
        label: 'name',
        value: 'orgId',
        children: 'list'
      },
      options: [],
      selectedOptions: [],
      selectedOrgId: ''
    }
  },
  handleMenu() {
    this.selectedOrgId = this.$refs['cascadeMenu'].currentValue
    console.log(this.selectedOrgId)
  },
  mounted: function() {
    // 调用方法获取所有数据
    this.getOrgList()
  },
  getOrgList() {
    this.$http({
      url: this.$http.adornUrl(''),
      method: 'get',
      params: this.$http.adornParams()
    }).then(({
      data
    }) => {
      this.options = data
    })
  }
}
</script>

<style scoped>
/* 设置树形最外层的背景颜色和字体颜色 */
.el-tree {
  color: black;
  background: transparent;
}

/* 设置三角形图标的颜色 */
.el-tree-node__expand-icon {
  color: #fff;
}

/* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */
.el-tree-node__content:hover .el-tree-node__expand-icon {
  color: #000;
}
/* .el-tree-node__content:hover .el-tree-node__expand-icon.is-leaf {
  color: transparent;
} */

/* 树节点鼠标悬浮式改变背景色，字体颜色 */
.el-tree-node__content:hover {
  background-color: #3274e6;
  color: #fff;
}

/* 改变节点高度 */
.el-tree-node__content {
  height: 36px;
}

/* 节点前边的三角图标并不会被节点样式影响，需要单独修改 当前激活的颜色*/
.el-tree-node:focus
> .el-tree-node__content
.el-tree-node__expand-icon {
  color: #fff;
}

/* 改变被点击节点背景颜色，字体颜色 */
.el-tree-node:focus > .el-tree-node__content {
  background-color: #3274e6;
  color: #fff;
}
</style>
